<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="<?=$this->baseUrl?>/public/js/ext3.2/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="<?=$this->baseUrl?>/public/js/ext3.2/css/icons.css"> 
<script type="text/javascript" src="<?=$this->baseUrl?>/public/js/ext3.2/ext-base.js"></script>
<script type="text/javascript" src="<?=$this->baseUrl?>/public/js/ext3.2/ext-all.js"></script>
<title>无标题文档</title>
</head>
<script type='text/javascript'>
Ext.BLANK_IMAGE_URL = '<?=$this->baseUrl?>/public/images/default/s.gif';
Ext.chart.Chart.CHART_URL='<?=$this->baseUrl?>/public/js/ext3.2/charts.swf';
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());	
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';	
var cp = new Ext.state.CookieProvider();
Ext.state.Manager.setProvider(cp);
var cssname = cp.get("style");	
Ext.util.CSS.swapStyleSheet("theme","<?=$this->baseUrl?>/public/css/"+cssname);
Ext.onReady(function(){
<?php

?>

var store = new Ext.data.JsonStore({
        fields: ['title', 'total','color','count'],
		url:baseUrl+'/link/chartdata/'
    });
    
    var piechart=new Ext.Panel({		
        title: '大饼图',
		collapsible:true,
        items: {
            store: store,
            xtype: 'piechart',
            dataField: 'total',
            categoryField: 'title',				
			tipRenderer:function(chart,record){
			return record.data.title+"共收费"+record.data.total+"人民币";
			},
            //extra styles get applied to the chart defaults
            extraStyle:
            {
                legend:
                {
                    display: 'right',
                    padding: 5,
                    font:
                    {
                        family: 'yahei',
                        size: 13
                    }
                }
            }
        }
    });
	
	var columnChart=new Ext.Panel({
	title:'柱状图',
	collapsible:true,
	items:[{
			store:store,
			xtype:'columnchart',
			xField:'title',
			yAxis:new Ext.chart.NumericAxis({
											title:'金额'	
											}),
			xAxis:new Ext.chart.CategoryAxis({
											 title:'名称'
											 }),
			series:[{
					type:'column',
					displayName:'总金额',
					yField:'total',
					style:{
						mode:'stretch',
						color:0x99bbc5}
					},{
					type:'line',
					displayName:"次数",
					yField:'count'
					}],
			  extraStyle:
            {
                legend:
                {
                    display: 'right',
                    padding: 5,
                    font:
                    {
                        family: 'yahei',
                        size: 13
                    }
                }
            }
		}]		  
	});
	
	var linechart=new Ext.Panel({
								title:'线状图',
								collapsible:true,
								items:[{
									   xtype:'linechart',
									   store:store,
									   xField:'title',
									   yField:'total'									   
									   }]
								});
	
	new Ext.Panel({
				  autoHeight:true,
				  autoWidht:true,
				  title:'图表演示',
				  layout:'table',
				  layoutConfig: {columns:2},
				  defaults: {frame:true, width:520, height: 320,style:'padding:5px 20px 5px 5px'},				  
				  renderTo:Ext.getBody(),
				  items:[piechart,columnChart,linechart]
				  });

});
</script>
</head>

<body>
<?
// print_r(json_decode($json));
?>

</body>
</html>